<template>
  <div>
    <!-- 头部 -->
    <van-sticky>
      <!-- 头部标签栏 -->
      <van-nav-bar
        title="口味经典"
        left-arrow
        @click-left="$router.push('/home/activity')"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 内容 -->
    <van-pull-refresh
      :value="loading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <div class="youxuan" v-for="item in premium" :key="item.id" @click="$router.push({ path: '/activity/activity-four-view', query: { id: item.id } })">
        <img :src="item.images" alt="" />
        <div class="youxuan_right">
          <b>{{ item.title }}</b>
          <h2>￥{{ item.price }}</h2>
          <div class="youxuan_rightx">
            <span>共售出{{ item.numsc }}</span>
            <span style="margin-right: 15px">{{ item.numpl }}人评论</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <!--  -->
    <van-back-top style="width: 100px; background-color: orange;">返回顶部</van-back-top>
  </div>
</template>

<script setup>
import myaxios from "@/http/MyAxios";
import { onMounted, ref } from "vue";

const loading = ref(false);

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

// 精品优选
const premium = ref([]);

onMounted(() => {
  let url = "http://127.0.0.1:5000/actweek/actweekthree";
  myaxios.get(url).then((res) => {
    console.log("结果", res);
    premium.value = res.data.data;
  });
});




// import myaxios from "@/http/MyAxios";
//     import { onBeforeMount,ref } from "vue";
//     import { useRoute} from "vue-router";
//     const $route=useRoute()
//     const test=ref('1')

//      const topicxs = ref({});
//      onBeforeMount(() => {
//         console.log($route.query.id);
//         console.log(test);
//         let url = `http://127.0.0.1:5000/actweek/actweekthree/id?id=${$route.query.id}`;
//         myaxios.get(url).then((res) => {
//             console.log("资讯详情查询结果", res);
//             topicxs.value = res.data.data
//             console.log(topicxs);
//         });
//     });

</script>

<style lang="scss" scoped>
.youxuan {
  height: 120px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;

  img {
    width: 90px;
    height: 90px;
    margin-left: 15px;
  }
}
.youxuan .youxuan_right {
  width: calc(100% - 115px);
  height: 90px;
  margin-left: 10px;
  h2 {
    margin-top: 18px;
    color: red;
  }
}
.youxuan .youxuan_right .youxuan_rightx {
  display: flex;
  justify-content: space-between;
}
</style>